<template>
  <div class="main-container">
    <div style="background-color: #fff; height: 100%">
      <a-tabs :lazy-load="true" justify type="card" :default-active-key="active">
        <a-tab-pane key="1" title="五金仓库存">
          <div style="height: 100%">
            <NventoryManagement2></NventoryManagement2>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" title="制具仓库存">
          <div style="height: 100%">
            <NventoryManagement3></NventoryManagement3>
          </div>
        </a-tab-pane>
        <a-tab-pane key="3" title="原纱仓库存">
          <div style="height: 100%">
            <NventoryManagement4></NventoryManagement4>
          </div>
        </a-tab-pane>
        <a-tab-pane key="4" title="坯布仓库存">
          <div style="height: 100%">
            <BlastclothStorage></BlastclothStorage>
          </div>
        </a-tab-pane>
        <a-tab-pane key="5" title="次布仓库存">
          <div style="height: 100%">
            <SecondaryClothWarehouseStorage></SecondaryClothWarehouseStorage>
          </div>
        </a-tab-pane>
        <a-tab-pane title="成品仓库存" key="6">
          <div style="height: 100%">
            <FinishedGoodsStorage />
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script lang="ts">
  import NventoryManagement2 from './components/NventoryManagement2.vue'
  import NventoryManagement3 from './components/NventoryManagement3.vue'
  import NventoryManagement4 from './components/NventoryManagement4.vue'
  import NventoryManagement5 from './components/NventoryManagement5.vue'
  import BlastclothStorage from './components/Blastclothstorage.vue'
  import SecondaryClothWarehouseStorage from './components/SecondaryClothWarehouseStorage.vue'
  import FinishedGoodsStorage from '@/views/FinishedWarehouseManagement/components/FinishedGoodsStorage/index.vue'

  import { useRoute } from 'vue-router'
  export default {
    name: 'Nventory',
    setup() {
      const route = useRoute()

      const active = ref('1')
      if (route.query.key) {
        active.value = route.query.key + ''
      }
      return {
        active,
      }
    },
    components: {
      NventoryManagement2,
      NventoryManagement3,
      NventoryManagement4,
      BlastclothStorage,
      NventoryManagement5,
      SecondaryClothWarehouseStorage,
      FinishedGoodsStorage,
    },
  }
</script>

<style scoped>
  .main-container {
    height: 100%;
  }

  :deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
  }

  :deep(.arco-table-td-content) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  :deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
  }
</style>
